<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{path:'/home'}">首页</el-breadcrumb-item>
    </el-breadcrumb>
  <el-card>
    <el-row :gutter="25">
      <el-col :span="4">
        <el-button type="primary" @click="addDialogVisible= true">添加学生</el-button>
      </el-col>
    </el-row>
  </el-card>
    <el-dialog title="添加学生" :visible.sync="addDialogVisible" width="50%" close="addDialogClosed">
      <el-form :model="student" :rules="addFormRules" ref="addFormRef" label-width="70px">
        <el-form-item label="学号" prop="studentNo">
          <el-input v-model="student.studentNo"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="studentName">
          <el-input v-model="student.studentName"></el-input>
        </el-form-item>
        <el-form-item label="地址" prop="address">
          <el-input v-model="student.address"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input v-model="student.sex"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="student.age"></el-input>
        </el-form-item>
        <el-form-item label="政治面貌" prop="politics">
          <el-input v-model="student.politics"></el-input>
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="student.nation"></el-input>
        </el-form-item>
        <el-form-item label="学制" prop="studentSystem">
          <el-input v-model="student.studentSystem"></el-input>
        </el-form-item>
        <el-form-item label="奖惩信息" prop="rewPun">
          <el-input v-model="student.rewPun"></el-input>
        </el-form-item>
        <el-form-item label="休复转退" prop="mark">
          <el-input v-model="student.mark"></el-input>
        </el-form-item>
        <el-form-item label="年级" prop="grade">
          <el-input v-model="student.grade"></el-input>
        </el-form-item>
        <el-form-item label="专业" prop="major">
          <el-input v-model="student.major"></el-input>
        </el-form-item>
        <el-form-item label="成绩" prop="studentScore">
          <el-input v-model="student.studentScore"></el-input>
        </el-form-item>
      </el-form>
      <!--底部-->
      <span solt="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addStudent">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //对话框状态
      addDialogVisible: false,
      //添加属性
      student:{
        studentNo:"",
        studentName:"",
        address:"",
        sex:"",
        age:"",
        politics:"",
        nation:"",
        studentSystem:"",
        rewPun:"",
        mark:"",
        grade:"",
        major:"",
        studentScore:"",
      },
      //表单验证
      addFormRules: {
        studentNo: [
          {required: true, message: '请输入学生学号', trigger: 'blur'},
          {min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'blur'}
        ],
        studentName: [
          {required: true, message: '请输入学生名字', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 8 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '请输入地址', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请输入性别', trigger: 'blur'},
          {min: 1, max: 20, message: '长度为1个字符', trigger: 'blur'}
        ],
        age: [
          {required: true, message: '请输入年龄', trigger: 'blur'},
          {min: 1, max: 3, message: '输入整数', trigger: 'blur'}
        ],
        politics: [
          {required: true, message: '请输入政治面貌', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        nation: [
          {required: true, message: '请输入民族', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        studentSystems: [
          {required: true, message: '请输入学制', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        rewPun: [
          {required: true, message: '请输入奖惩信息', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        mark: [
          {required: true, message: '请输入休复转退信息', trigger: 'blur'},
          {min: 1, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        grade: [
          {required: true, message: '请输入年级', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        major: [
          {required: true, message: '请输入专业', trigger: 'blur'},
          {min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur'}
        ],
        studentScore: [
          {required: true, message: '请输入成绩', trigger: 'blur'},
          {min: 1, max: 3, message: '输入整数', trigger: 'blur'}
        ],
      }
    }
  },
  created(){
    this.addStudent();
  },
  methods:{
    //监听添加用户
    addDialogClosed() {
      this.$refs.addFormRef.resetFields();
    },
    async addStudent(){
      const {data:res} = await this.$http.get("/add",{params:this.student});
      if (res.flag != "success") {
      }
      // 隐藏
      this.addDialogVisible = false;
    },
  },

}

</script>
<style lang="less" scoped>
.el-breadcrumb{
  margin-bottom: 15px;
  font-size: 17px;
}
</style>
